<template>
    <div class="guardIndex">
             

            <el-row>
                <el-col :span="24">
                        <el-form :inline="true" ref="queryForm" :model="queryParams" class="demo-form-inline">
                            <el-form-item>
                                <el-input
                                v-model="queryParams.sgName"
                                placeholder="保安姓名"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="性别">
                                <el-select v-model="queryParams.sgSex" placeholder="性别">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="聘用性质">
                                <el-select v-model="queryParams.sgHireQuality" placeholder="聘用性质">
                                    <el-option label="自聘" value="1"></el-option>
                                    <el-option label="代理" value="2"></el-option>
                                    <el-option label="委派" value="3"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary"  icon="el-icon-search" @click="searchSecurityGuardList()" plain>查询</el-button>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="default"  icon="el-icon-refresh" @click="resetQuery()" plain>重置</el-button>
                            </el-form-item>
                        </el-form>       
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-button type="primary" icon="el-icon-plus" @click="toAddDialog()">新增保安</el-button> 
                    </div>     
                </el-col>        
            </el-row>               

            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="sgName" label="保安姓名">
                                <template slot-scope="scope">
                                    <a href="/worker" target="_blank">{{scope.row.sgName}}</a>
                                </template> 
                            </el-table-column>
                            <el-table-column prop="sgSex" label="性别">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.sgSex == '男'">男</span>
                                    <span v-if="scope.row.sgSex == '女'">女</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sgNum" label="保安证编号"></el-table-column>
                            <el-table-column prop="sgAge" label="年龄"></el-table-column>
                            <el-table-column prop="sgHireQuality" label="聘用性质">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.sgHireQuality == 1">自聘</span>
                                    <span v-if="scope.row.sgHireQuality == 2">代理</span>
                                    <span v-if="scope.row.sgHireQuality == 3">委派</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sgPhone" label="联系电话"></el-table-column>
                            <el-table-column prop="hireDate" label="更新时间"></el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" icon="el-icon-edit" plain  @click="handleEdit(scope.row)">修改</el-button>
                                    <el-button size="mini" type="primary"  icon="el-icon-delete" plain  @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <div class="block">
                            <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="pageNum"
                              :page-sizes="[2, 5, 10, 20]"
                              :page-size="pageSize"
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>




                
                <el-dialog :title="title" :visible.sync="centerDialogVisible1">
                    <el-form :inline="true"  :model="SecurityGuard1" class="guardAddForm">
                        <el-form-item label="保安姓名:">
                            <el-input v-model="SecurityGuard1.sgName" placeholder="保安姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="保安证编号:">
                            <el-input v-model="SecurityGuard1.sgNum" placeholder="保安证编号"></el-input>
                        </el-form-item>

                        <el-form-item label="联系电话:">
                            <el-input v-model="SecurityGuard1.sgPhone" placeholder="联系电话"></el-input>
                        </el-form-item>

                        <el-form-item label="现居住地址:">
                            <el-input v-model="SecurityGuard1.sgAddr" placeholder="现居住地址"></el-input>
                        </el-form-item>

                        <el-form-item label="性别:">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="SecurityGuard1.sgSex" placeholder="性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <el-form-item label="民族:">
                            <el-select v-model="SecurityGuard1.sgEthnic" placeholder="民族">
                                <el-option label="汉族" value="汉族"></el-option>
                                <el-option label="壮族" value="壮族"></el-option>
                                <el-option label="回族" value="回族"></el-option>
                                <el-option label="满族" value="满族"></el-option>
                                <el-option label="维吾尔族" value="维吾尔族"></el-option>
                                <el-option label="苗族" value="苗族"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="学历:">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="SecurityGuard1.sgDegree" placeholder="学历">
                                <el-option label="无学历" value="无学历"></el-option>
                                <el-option label="小学" value="小学"></el-option>
                                <el-option label="初中" value="初中"></el-option>
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="高中" value="高中"></el-option>
                                <el-option label="专科" value="专科"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                            </el-select>
                        </el-form-item>

                        &nbsp;&nbsp;

                        <el-form-item label="政治面貌:">
                            <el-select v-model="SecurityGuard1.sgPolitics" placeholder="政治面貌">
                                <el-option label="群众" value="群众"></el-option>
                                <el-option label="共青团员" value="共青团员"></el-option>
                                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                                <el-option label="中共党员" value="中共党员"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="聘用日期:">
                            <el-input v-model="SecurityGuard1.hireDate" placeholder="聘用日期"></el-input>
                        </el-form-item>   

                        &nbsp;&nbsp;

                         <el-form-item label="应发月薪:">
                            <el-input v-model="SecurityGuard1.sgMonthlySalary" placeholder="应发月薪"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">      
                        <el-button type="primary" @click="addSecurityGuard()">确 定</el-button>
                        <el-button @click="centerDialogVisible1 = false,quxiaoQuery()">取 消</el-button>
                    </span>
                </el-dialog>


                <el-dialog :title="title" :visible.sync="centerDialogVisible2">
                    <el-form :inline="true"  :model="SecurityGuard2" class="guardUpdForm">
                        <el-form-item label="保安姓名:">
                            <el-input v-model="SecurityGuard2.sgName" placeholder="保安姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="保安证编号:">
                            <el-input v-model="SecurityGuard2.sgNum" placeholder="保安证编号"></el-input>
                        </el-form-item>

                        <el-form-item label="联系电话:">
                            <el-input v-model="SecurityGuard2.sgPhone" placeholder="联系电话"></el-input>
                        </el-form-item>

                        <el-form-item label="现居住地址:">
                            <el-input v-model="SecurityGuard2.sgAddr" placeholder="现居住地址"></el-input>
                        </el-form-item>

                        <el-form-item label="性别:">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="SecurityGuard2.sgSex" placeholder="性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <el-form-item label="民族:">
                            <el-select v-model="SecurityGuard2.sgEthnic" placeholder="民族">
                                <el-option label="汉族" value="汉族"></el-option>
                                <el-option label="壮族" value="壮族"></el-option>
                                <el-option label="回族" value="回族"></el-option>
                                <el-option label="满族" value="满族"></el-option>
                                <el-option label="维吾尔族" value="维吾尔族"></el-option>
                                <el-option label="苗族" value="苗族"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="学历:">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="SecurityGuard2.sgDegree" placeholder="学历">
                                <el-option label="无学历" value="无学历"></el-option>
                                <el-option label="小学" value="小学"></el-option>
                                <el-option label="初中" value="初中"></el-option>
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="高中" value="高中"></el-option>
                                <el-option label="专科" value="专科"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                            </el-select>
                        </el-form-item>

                        &nbsp;&nbsp;

                        <el-form-item label="政治面貌:">
                            <el-select v-model="SecurityGuard2.sgPolitics" placeholder="政治面貌">
                                <el-option label="群众" value="群众"></el-option>
                                <el-option label="共青团员" value="共青团员"></el-option>
                                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                                <el-option label="中共党员" value="中共党员"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="聘用日期:">
                            <el-input v-model="SecurityGuard2.hireDate" placeholder="聘用日期"></el-input>
                        </el-form-item>   

                        &nbsp;&nbsp;

                        <el-form-item label="应发月薪:">
                            <el-input v-model="SecurityGuard2.sgMonthlySalary" placeholder="应发月薪"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">      
                        <el-button type="primary" @click="updSecurityGuard()">确 定</el-button>
                        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                    </span>
                </el-dialog>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    name: "GuardIndex",
    data(){
        return{
            title: "新增保安",
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 5,
            queryParams: {
                sgName: "",
                sgSex: "",
                sgHireQuality: "",
            },
            SecurityGuard1: {
                sgName: "",
                sgNum: "",
                sgPhone: "",
                sgAddr: "",
                sgSex: "",
                sgEthnic: "",
                sgDegree: "",
                sgPolitics: "",
                hireDate: "",
                sgMonthlySalary: "",
            },
            SecurityGuard2: {
                sgName: "",
                sgNum: "",
                sgPhone: "",
                sgAddr: "",
                sgSex: "",
                sgEthnic: "",
                sgDegree: "",
                sgPolitics: "",
                hireDate: "",
                sgMonthlySalary: "",
            },
            centerDialogVisible1: false,
            centerDialogVisible2: false,
        }
    },
    created(){
        this.searchSecurityGuardList();
    },
    methods: {
       searchSecurityGuardList(){
            axios.post("/api/manager/guard/pageSecurityGuard?pageNum="+this.pageNum+"&pageSize="+this.pageSize, this.queryParams)
            .then((res) => {
                this.tableData = res.data.data.items
                this.total = res.data.data.totalElements
            })
       },
       handleSizeChange(val) {
            this.pageSize = val;
            //console.log(`每页 ${val} 条`);
            this.searchSecurityGuardList()
       },
       handleCurrentChange(val) {
            this.pageNum = val;
            //console.log(`当前页: ${val}`);
            this.searchSecurityGuardList()
       },

       quxiaoQuery(){
            this.SecurityGuard1.sgName = "",
            this.SecurityGuard1.sgNum = "",
            this.SecurityGuard1.sgPhone = "",
            this.SecurityGuard1.sgAddr = "",
            this.SecurityGuard1.sgSex = "",
            this.SecurityGuard1.sgEthnic = "",
            this.SecurityGuard1.sgDegree = "",
            this.SecurityGuard1.sgPolitics = "",
            this.SecurityGuard1.hireDate = "",
            this.SecurityGuard1.sgMonthlySalary = "";
        },

        resetQuery(){
            this.queryParams.sgName = ""
            this.queryParams.sgSex = ""
            this.queryParams.sgHireQuality = ""
            this.searchSecurityGuardList()
        },

        clean() {
          this.SecurityGuard1 = {
                sgName: "",
                sgNum: "",
                sgPhone: "",
                sgAddr: "",
                sgSex: "",
                sgEthnic: "",
                sgDegree: "",
                sgPolitics: "",
                hireDate: "",
                sgMonthlySalary: "",
          },
          this.centerDialogVisible1 = false
        },

        toAddDialog(){
            this.centerDialogVisible1 = true;
            this.title = "新增保安"
        },

        addSecurityGuard() {
            axios.post("/api/manager/guard/addSecurityGuard",this.SecurityGuard1)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.centerDialogVisible1 = false
                        this.clean()
                        this.searchSecurityGuardList()
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },

        handleDelete(row) {
            axios.get("/api/manager/guard/delSecurityGuard?id=" + row.id)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.searchSecurityGuardList();
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },



        handleEdit(row) {
            this.centerDialogVisible2 = true
            this.title = "修改保安"
            axios.get("/api/manager/guard/findSecurityGuardById?id=" + row.id)
                .then((res) => {
                    this.SecurityGuard2 = res.data.data;
                })
        },

        updSecurityGuard(){
            axios.post("/api/manager/guard/updSecurityGuard",this.SecurityGuard2)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.centerDialogVisible2 = false;
                        this.searchSecurityGuardList(); 
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },
    }
}
</script>


<style scoped>
.block {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}
.guardAddForm .el-input, .guardAddForm .el-select {
  width: 300px;
}
.guardUpdForm .el-input, .guardUpdForm .el-select {
  width: 300px;
}
</style>